<template>
  <div class="top">
    <span>分类：</span>
    <div class="top_items">
      <div class="top_item" @click="selectItems(0)">总览</div>
      <div class="top_item" @click="selectItems(1)">计数</div>
      <div
        class="top_item"
        v-show="route.path.includes('/test/echarts/subject')"
      >
        科目
      </div>
    </div>
  </div>
  <div class="line_item">
    <router-view></router-view>
  </div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import { watchEffect, onMounted } from "vue";

const router = useRouter();
const route = useRoute();

const setStyle = (index) => {
  console.log(index);
  const topItems = document.querySelector(".top_items");
  const itemCount = topItems ? topItems.children.length : 0;
  for (let i = 0; i < itemCount; i++) {
    const item = document.querySelector(`.top_item:nth-child(${i + 1})`);
    if (item) {
      if (i === index) {
        item.style.backgroundColor = "#409eff";
        item.style.color = "#fff";
      } else {
        item.style.backgroundColor = "";
        item.style.color = "";
      }
    }
  }
};

const selectItems = (index) => {
  if (index == 0) {
    router.push("/test/echarts/analysis");
  } else if (index == 1) {
    router.push("/test/echarts/statistics");
  }
  setStyle(index);
};

onMounted(() => {
  watchEffect(() => {
    const currentPath = route.path;
    console.log(currentPath);
    if (currentPath.includes("/test/echarts/statistics")) {
      setStyle(1);
    } else if (currentPath.includes("/test/echarts/analysis")) {
      setStyle(0);
    } else if (currentPath.includes("/test/echarts/subject")) {
      setStyle(2);
    }
  });
});
</script>
<style scoped>
.top {
  margin-top: 20px;
  display: flex;
}
.line_item {
  margin-top: 5px;
  width: 100%;
  border: 1px solid rgb(226, 226, 226);
  background-color: white;
}

.top_items {
  height: 30px;
  display: flex;
  margin-left: 40px;
}

.top_item {
  width: 45px;
  height: 25px;
  border-radius: 3px;
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
}
</style>
